<script setup>
import { ref, computed } from 'vue';

const num = ref(10)

console.log(num);

// 第一种使用计算属性的方法，传递函数
// 如果只需要可读数据可以使用传递函数的方法
// let num2 = computed(() => {
//   console.log('计算属性被执行了');
//   return num.value * 0.8
// })

// 第二种使用计算属性方法，传递对象
// 如果需要可写的计算属性那么就可以使用传递对象的方法
let num2 = computed({
  get () {
    return num.value * 0.5
  },
  set (newValue) {
    num.value = newValue / 0.5
  }
})

function change () {
  // num.value = 20

  console.log(num2);
  num2.value = 20
}

</script>

<template>
  <div>
    <h1>
      属性 num: {{ num }}
      <br>
      计算属性 num2: {{ num2 }}
    </h1>


    <button @click="change">点击修改</button>
  </div>
</template>

